<template>
  <div class="like">
    <div class="likes">
      <img src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">
      <span>猜你喜欢</span>
    </div>
    <ul>
      <li class="border-bottom"  v-for="item of list" :key="item.id">
        <div class="like-img">
          <img :src="item.imgUrl" />
          <div class="like-minimg" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png)">{{ item.name }}</div>
        </div>
        <div class="like-right">
          <div class="like-name">{{ item.title }}</div>
          <div class="like-com">
            <span class="iconfont">&#xe647;&#xe647;&#xe647;&#xe647;&#xe647;</span>
            <span>{{ item.comment }}</span>
          </div>
          <div class="price">
            <span class="priceLeft">¥<em>{{ item.price }}</em></span>起
            <span class="priceRight">{{ item.address }}</span>
          </div>
          <div class="describe">
            <span>{{ item.desc }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeLike',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .like
    overflow hidden
    background white
    margin 0.2rem 0
  .like
    ul
      margin-left 0.24rem
  .like
    li
      overflow hidden
      padding-top 0.2rem
      display flex
  .likes
    padding .24rem 0.2rem 0.26rem
  .likes
    img
      overflow: hidden
      width 0.3rem
      height 0.3rem
      margin-left 0.2rem
      vertical-align top
  .likes
    span
      margin-left 0.08rem
      height 0.44rem
      color #212121
      font-size 0.32rem
      line-height 0.44rem
  .like-img
    float left
    overflow hidden
    height 2rem
    position relative
    flex 1
  .like-img
    img
      width 100%
  .like-minimg
    position absolute
    top 0rem
    left 0
    width 1.02rem
    height 0.38rem
    background-size 100%
    color #fff
    font-size 0.2rem
    line-height 0.38rem
    text-indent 0.04rem
  .like-right
    float left
    overflow hidden
    padding-left 0.22rem
    flex 2
  .like-name
    margin-top 0.26rem
    height 0.44rem
    color #212121
    font-size 0.32rem
    line-height 0.44rem
  .like-com
    margin-top 0.14rem
    height 0.34rem
  .like-com
    span
      margin-right 0.4rem
  .com-left
    display inline-block
    position relative
    width 1.5rem
    height 0.28rem
    line-height 0.28rem
    font-size 0.28rem
    letter-spacing 0.02rem
  .price
    position: relative
    margin-top 0.22rem;
    color #616161;
    font-size 0.24rem;
    line-height 0.4rem;
  .priceLeft
    color #ff8300
  .priceLeft
    em
      font-size 0.4rem
  .priceRight
    position absolute
    right 0.24rem
    bottom 0
  .describe
    display inline-block
    margin-top 0.48rem
    margin-right 0.24rem
    background #fff9f9
    padding 0.04rem 0.1rem
    color #f55
    font-size 0.24rem
    line-height 0.34rem
  .like-right
    .iconfont
      color #ffb436
      font-size 0.2rem
</style>
